<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.div {
	animation: feng 5s infinite linear alternate;
	position: absolute;
}

html {
	height: 100%;
}

body {
	height: 100%;
	background-image: url("caodi.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	overflow: hidden;
}

.div2 {
	animation: che 0.2s infinite linear;
	margin-top: 220px;
	margin-left: 410px;
	position: absolute;
	height: 200px;
	width: 200px;
}

.div3 {
	animation: che1 3s infinite linear;
	position: absolute;
	margin-top: 450px;
	margin-left: 703px;
	height: 150px;
	width: 150px;
}

.div4 {
	animation: che2 0.5s infinite linear;
	margin-top: 290px;
	margin-left: 805px;
	height: 400px;
	width: 400px;
}
@keyframes che1{
from{ transform: rotate(0deg);}
to{ transform: rotate(360deg);}
}
@keyframes che2{
from{ transform: rotate(0deg);}
to{ transform: rotate(360deg);}
}
@keyframes che{
from{ transform: rotate(0deg);}
to{ transform: rotate(360deg);}
}
@keyframes feng {
	from {left: 0;
	color: skyblue;
	font-size: 20px;
}

to {
	left: 1000px;
	color: green;
	font-size: 50px;
}

}
</style>

</head>

<body>
	<font class="div"> 今天风有点大！ </font>
	<img class="div2" src="fc.png" alt="123">
	<img class="div3" src="fc.png" alt="123">
	<img class="div4" src="fc.png" alt="123">
</body>
</html>